var cpage = 0;
function pro_hot_cate_top3(p) {
    showTableAndEcharts();
    cpage = p;
    $.ajax({
        method: "POST",
        url: "findProHotCateTop3",
        data: {
            page: p
        },
        success: function (data) {
            $("#tip").html("<h3>区域热门类目Top3表格</h3>");
            $("#echart-tip").html("<h3>区域热门类目Top3图表</h3>");

            //重置表头
            $("#head-tr").empty();
            //重新添加表头
            $("#head-tr").append("<th>ID</th><th>省份</th><th>类目ID</th><th>类目名</th><th>浏览量</th><th>加入购物车量</th><th>购买量</th>");

            //重置表的数据
            $("tbody").empty();
            var jsonArr = JSON.parse(data);

            //重新加载表格的数据
            initTable(jsonArr);

            //加载图表
            initEchart();
        }
    })
}

function initTable(jsonArr) {
    $.each(jsonArr, function (index, proHotCate) {
        if (index % 2 == 0) {
            $("tbody").append("<tr class='active'><td>"+proHotCate.id+"</td><td>"+proHotCate.province+"</td><td>"
                +proHotCate.cid+"</td><td>"+proHotCate.cname+"</td><td>"+proHotCate.viewCount+
                "</td><td>"+proHotCate.cartCount+"</td><td>"+proHotCate.parchaseCount+"</td></tr>")
        } else {
            $("tbody").append("<tr class='info'><td>"+proHotCate.id+"</td><td>"+proHotCate.province+"</td><td>"
                +proHotCate.cid+"</td><td>"+proHotCate.cname+"</td><td>"+proHotCate.viewCount+
                "</td><td>"+proHotCate.cartCount+"</td><td>"+proHotCate.parchaseCount+"</td></tr>")
        }
    });

    $("tbody tr").on("mouseenter", this, function() {
        color = $(this).attr("class");
        $(this).removeClass(color);
        $(this).addClass("success");
    });
    $("tbody tr").on("mouseleave", this, function() {
        $(this).removeClass("success");
        $(this).addClass(color);
    });

    //循环获取分页的页数
    var pages = 0;
    $.ajax({
        method: "POST",
        url: "getPages",
        success: function (data) {
            pages = data;

            //添加分组组件
            var page = "<tr><td colspan='7'>";
            page += "<nav aria-label='Page navigation'>";
            page += "<ul class='pagination'>";
            page += "<li>";
            if (cpage > 1) {
                page += "<a href='javascript:pro_hot_cate_top3("+(cpage - 1)+")' aria-label='Previous'>";
            } else {
                page += "<a href='javascript:pro_hot_cate_top3(1)' aria-label='Previous'>"
            }
            page += "<span aria-hidden='true'>&laquo;</span>";
            page += "</a>";
            page += "</li>";

            //只显示10个分页
            if (pages <= 10) {
                for (var i = 1; i<=pages; i++) {
                    if (cpage == i) {
                        page += "<li class='active'><a href='javascript:pro_hot_cate_top3("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                    } else {
                        page += "<li><a href='javascript:pro_hot_cate_top3("+i+")'>"+i+"</a></li>"
                    }
                }
            } else {
                if (cpage <= 6) {
                    for (var i = 1; i<=10; i++) {
                        if (cpage == i) {
                            page += "<li class='active'><a href='javascript:pro_hot_cate_top3("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                        } else {
                            page += "<li><a href='javascript:pro_hot_cate_top3("+i+")'>"+i+"</a></li>"
                        }
                    }
                } else if (cpage > 6 && (cpage+4) <= pages) {
                    for (var i = cpage-5; i<=cpage+4; i++) {
                        if (cpage == i) {
                            page += "<li class='active'><a href='javascript:pro_hot_cate_top3("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                        } else {
                            page += "<li><a href='javascript:pro_hot_cate_top3("+i+")'>"+i+"</a></li>"
                        }
                    }
                } else {
                    for (var i = cpage-9; i<=cpage; i++) {
                        if (cpage == i) {
                            page += "<li class='active'><a href='javascript:pro_hot_cate_top3("+i+")'>"+i+"<span class='sr-only'>(current)</span></a></li>"
                        } else {
                            page += "<li><a href='javascript:pro_hot_cate_top3("+i+")'>"+i+"</a></li>"
                        }
                    }
                }
            }


            page += "<li>";

            if (cpage < pages) {
                page += "<a href='javascript:pro_hot_cate_top3("+(cpage+1)+")' aria-label='Next'>"
            } else {
                page += "<a href='javascript:pro_hot_cate_top3("+pages+")' aria-label='Next'>"
            }

            page += "<span aria-hidden='true'>&raquo;</span>";
            page += "</a>";
            page += "</li>";
            page += "</ul>";
            page += "</nav>";
            page += "</td></tr>";
            $("tbody").append(page);
            $("tbody tr:last-child td").css("text-align", "center")
        }
    });

}

function initEchart() {
    //添加图表对应的容器
    $("#dataEcharts div:gt(0)").remove();
    $("#dataEcharts").append('<div id="top3cate" style="width: 100%; height: 800px"></div>');

    $.ajax({
        method:"POST",
        url:"findAllProHotCate",
        success: function (data) {
            var proArr = [];
            var top1Arr = [];
            var top2Arr = [];
            var top3Arr = [];
            var jsonArr = JSON.parse(data);
            $.each(jsonArr, function (index, hotCate) {
                if (index%3==0) {
                    proArr.push(hotCate.province);
                    top1Arr.push(hotCate.parchaseCount);
                } else if (index%3==1) {
                    top2Arr.push(hotCate.parchaseCount);
                } else if (index%3==2) {
                    top3Arr.push(hotCate.parchaseCount);
                } else {
                    console.log("----------error---------")
                }
            });
            createEchart(proArr, top1Arr, top2Arr, top3Arr, "top3cate")
        }
    });

}

function createEchart(proArr, top1Arr, top2Arr, top3Arr, id) {

    var top3cate = echarts.init(document.getElementById(id));

    var option = {
        title: {
            text: '各区域热门类目top3展示',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        dataZoom: [
            {
                type: 'inside'
            },
            {
                type: 'slider'
            }
        ],
        legend: {
            data: ['top1', 'top2', 'top3'],
            orient: 'vertical',
            left: "right"
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar', 'stack'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        xAxis: [
            {
                type: 'category',
                axisTick: { show: false },
                data: proArr
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'view',
                type: 'bar',
                barGap: 0,
                emphasis: {
                    focus: 'series'
                },
                data: top1Arr
            },
            {
                name: 'cart',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: top2Arr
            },
            {
                name: 'parchase',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                data: top2Arr
            },
        ]
    };
    top3cate.setOption(option);

}